<template>
  <div>
    <div>
      <van-nav-bar title="账号注销" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="center">
      <div class="background"></div>
      <div class="text">重要提示</div>
    </div>
    <div class="attention">
      <div class="paragraph">
        注销账户是不可恢复的操作。操作之前请确定账户相关的服务已进行妥善的处理
      </div>
      <div class="paragraph">
        解绑实名之前，请确认你的账户没有未结清的金融业务、在贷余额。全部结清后可以解绑实名。
      </div>
      <div class="paragraph">
        注销账户后，你将无法使用本账户或找回账户内任何的内容或信息，包括但不限于：
      </div>
      <div class="paragraph">
        ~账户将无法登录，无法查看账户相关的保单、订单
        <br />
        ~你的个人信息、家人信息将无法找回
        <br />
        ~你的账户实名将会解绑
        <br />

        ~请妥善处理账户中的虚拟资产，注销后资产将无法找回，如红包、积分、优惠券、赠显卡等
        <br />
        ~本账户已激活的U享会员权益将失效，且无法被其他账户再次激活
        <br />

        ~在账户注销期间，如果你的账户被投诉、被国家机关调查或处于诉讼、仲裁程序中，众安有权自行终止你的账户注销而无需另行
        得到你的同意
        <br />
      </div>
      <div class="paragraph">
        请注意，注销你的账户并不代表本账户注销前的账户行为和相关责任得到豁免或减轻。
      </div>
    </div>
    <div class="cankao">*该页面内容仅供参考</div>
    <div class="ok">
      <van-checkbox v-model="checked">我已知晓</van-checkbox>
    </div>
    <div>
      <van-button
        type="primary"
        class="button"
        block
        :disabled="!checked"
        @click="confirm"
      >
        申请注销
      </van-button>
      <van-dialog
        v-model="show"
        title="确认注销您的账号吗"
        show-cancel-button
        confirmButtonText="确认注销"
        cancelButtonColor="@c-color-primary"
        confirmButtonColor="#999"
      >
        <div class="d-content">
          <div class="p1">注销后账号将无法找回</div>
          <div class="p2">点击注销即表示您已知晓</div>
        </div>
      </van-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: false,
      show: false
    }
  },
  methods: {
    onClickLeft() {
      window.history.go(-1)
    },
    confirm() {
      this.show = true
    }
  }
}
</script>
<style scoped lang="less">
.center {
  width: 375px;
  height: 70px;
  position: relative;
}
.background {
  width: 86px;
  height: 7px;
  border-radius: 5px;
  background-color: rgba(246, 134, 87, 0.4);
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
}
.text {
  font-size: 18px;
  height: 18px;
  line-height: 18px;
  color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
.attention {
  width: 345px;
  padding: 0 15px;
  font-size: 13px;
  color: #666;
}
.paragraph {
  padding: 15px;
}
.cankao {
  color: #999;
  font-size: 12px;
  margin-left: 30px;
  margin-top: -10px;
}
.ok {
  width: 345px;
  padding: 15px;
  font-size: 13.5px;
  color: #333;
}
.button {
  width: 345px;
  height: 50px;
  border-radius: 4.5px;
  margin: 0 auto;
  margin-top: 90px;
}
.d-content {
  font-size: 15px;
  color: #666;
  text-align: center;
  padding: 20px;
}
/deep/.van-dialog__header {
  color: #333;
  font-weight: bold;
  font-size: 18px;
}
</style>
